<!DOCTYPE html>
<html>
<head>
    <title>奥运五环</title>
</head>
<body>
    <canvas id="canvas" width="400" height="200" style="border:1px solid #c3c3c3;">
        Your browser not support Canvas!
    </canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = 5;
    ctx.strokeStyle = "#163b61";
    ctx.beginPath();
    ctx.arc(70,70,40,0,Math.PI*2,false);
    ctx.stroke();
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.arc(160,70,40,0,Math.PI*2,false);
    ctx.stroke();
    ctx.strokeStyle = "#bf0628";
    ctx.beginPath();
    ctx.arc(250,70,40,0,Math.PI*2,false);
    ctx.stroke();
    ctx.strokeStyle = "#ebc41f";
    ctx.beginPath();
    ctx.arc(110,110,40,0,Math.PI*2,false);
    ctx.stroke();
    ctx.strokeStyle = "#198e4a";
    ctx.beginPath();
    ctx.arc(200,110,40,0,Math.PI*2,false);
    ctx.stroke();

    //画圆弧，为了达到看起来环环相扣的效果
    ctx.strokeStyle = "#163b62";
    ctx.beginPath();
    ctx.arc(70,70,40,Math.PI*1.9,Math.PI*2.1,false);
    ctx.stroke();
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.arc(160,70,40,Math.PI*0.9,Math.PI*2.1,false);
    ctx.stroke();
    ctx.strokeStyle = "#bf0628";
    ctx.beginPath();
    ctx.arc(250,70,40,Math.PI*0.9,Math.PI*1.1,false);
    ctx.stroke();
</script>
</body>
</html>